<template>
  <div class="console">
    <!--数据卡片-->
    <n-card title="状态">
      <n-grid cols="1 s:3 m:5 l:6 xl:6 2xl:8" responsive="screen" :x-gap="12" :y-gap="8">
        <n-grid-item>
          <div class="flex flex-col justify-center items-center">
            <span>负载状态</span>
            <n-popover trigger="hover" placement="bottom">
              <template #trigger>
                <n-progress type="circle" :percentage="80" :offset-degree="0" color="#99cc00" />
              </template>
              <div>负载信息</div>
              <div> 非常棒</div>
            </n-popover>
          </div>
        </n-grid-item>
        <n-grid-item>
          <div class="flex flex-col justify-center items-center">
            <span>CPU</span>
            <n-popover trigger="hover" placement="bottom">
              <template #trigger>
                <n-progress type="circle" :percentage="80" :offset-degree="0" />
              </template>
              <div>负载信息</div>
              <div> 非常棒</div>
            </n-popover>
          </div>
        </n-grid-item>
        <n-grid-item>
          <div class="flex flex-col justify-center items-center">
            <span>内存</span>
            <n-popover trigger="hover" placement="bottom">
              <template #trigger>
                <n-progress type="circle" :percentage="80" :offset-degree="0" />
              </template>
              <div>负载信息</div>
              <div> 非常棒</div>
            </n-popover>
          </div>
        </n-grid-item>
        <n-grid-item>
          <div class="flex flex-col justify-center items-center">
            <span>存储</span>
            <n-popover trigger="hover" placement="bottom">
              <template #trigger>
                <n-progress type="circle" :percentage="80" :offset-degree="0" />
              </template>
              <div>负载信息</div>
              <div> 非常棒</div>
            </n-popover>
          </div>
        </n-grid-item>
      </n-grid>
    </n-card>

    <n-grid cols="1 s:1 m:2 l:2 xl:2 2xl:2" responsive="screen" :x-gap="12" :y-gap="8" class="mt-3">
      <n-grid-item>
        <n-card title="系统信息">
          <n-descriptions label-placement="left" bordered :column="1">
            <n-descriptions-item label="主机名"> host-root</n-descriptions-item>
            <n-descriptions-item label="操作系统"> Debian 12</n-descriptions-item>
            <n-descriptions-item label="内核版本"> 5.10.0-30-amd64</n-descriptions-item>
            <n-descriptions-item label="面板版本"> V 1.1.0</n-descriptions-item>
            <n-descriptions-item label="面板运行时间"> 26天</n-descriptions-item>
            <n-descriptions-item label="操作">
              <n-button>重启面板</n-button>
              <n-button>检测更新</n-button>
            </n-descriptions-item>
          </n-descriptions>
        </n-card>
      </n-grid-item>
      <n-grid-item>
        <n-card title="统计信息">
          <n-grid cols="1 s:3" responsive="screen" :x-gap="12" :y-gap="8">
            <n-grid-item>
              <n-statistic label="网站" :value="99" />
            </n-grid-item>
            <n-grid-item>
              <n-statistic label="数据库" :value="99" />
            </n-grid-item>
            <n-grid-item>
              <n-statistic label="计划任务" :value="99" />
            </n-grid-item>
          </n-grid>
          <div>BPanel服务器面板，欢迎使用！</div>
          <div>赞助支持请点击</div>
          <div>开源地址： <n-button text>https://github.com/xiaopanglian/bpanel</n-button></div>
        </n-card>
      </n-grid-item>
    </n-grid>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { getConsoleInfo } from '@/api/dashboard/console';

  interface InVisits {
    dayVisits: number;
    rise: number;
    decline: number;
    amount: number;
  }

  interface InSaleroom {
    weekSaleroom: number;
    amount: number;
    degree: number;
  }

  interface InOrderLarge {
    weekLarge: number;
    rise: number;
    decline: number;
    amount: number;
  }

  interface InVolume {
    weekLarge: number;
    rise: number;
    decline: number;
    amount: number;
  }

  const loading = ref(true);
  const visits = ref({} as InVisits);
  const saleroom = ref({} as InSaleroom);
  const orderLarge = ref({} as InOrderLarge);
  const volume = ref({} as InVolume);

  onMounted(async () => {
    const data = await getConsoleInfo();
    visits.value = data.visits;
    saleroom.value = data.saleroom;
    orderLarge.value = data.orderLarge;
    volume.value = data.volume;
    loading.value = false;
  });
</script>

<style lang="less" scoped></style>
